-- 节流和防抖

应用场景

下拉界面时，会有返回顶部，但是 window.onscroll 会执行很多次，

防抖：无论执行多少次，在不执行后，隔一段时间，再继续执行（最后一个触发结束后隔一段时间执行）

节流：一小段时间内，无论触发多少次，只执行一次（调整执行频率）

防抖

函数防抖（debounce），指的是，如果事件触发的频率小于 100ms，不去触发事件，如果大于 100ms，间隔 100ms 后执行，再给出最终结果会按照最终结果执行。

function deBounce(fun, delay) {
  timber = null
  return function () {
    if (timber) {
      clearTimeout(timber)
    }
    timber = setTimeout(fun, delay)
  }
}

节流

函数节流（throttle），指的是如果同一个事件，一秒内触发 100 次，持续十秒，全部执行会造成很大的资源浪费，所以，如果一直在触发事件，在执行事件时，每 100ms 秒执行一次。

// setInterval 实现节流
function deFlow(fun,interval){
  let timber = null
  let timeout = null
  return function(){
    if(timber){
      if(timeout){
        clearTimeout(timeout)
      }
      timeout = setTimeout(()=>{
        clearInterval(timber)
        timber = null
      },interval)
    }else{
      timber =  setInterval(fun,interval)
    }
  }
}

通过 setTimeout 实现节流

function deFlow(fun,interval){
  let state = false
  return function(){
    if(state){
      return false
    }else{
      state = true
      setTimeout(()=>{
        fun()
        state = false
      },interval)
    }
  }
}

用下面的方法试一试防抖和节流

function onScrool(){
  let top = document.body.scrollTop ||document.documentElement.scrollTop
  console.log(top);
}
window.onscroll = deFlow(onScrool,1000) 

参考文章

作者	链接
安歌	https://segmentfault.com/a/1190000018428170